<!-- StudyPlanList_Frame.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>学习计划列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/jquery-weui.min.css">
		<link rel="stylesheet" href="../../css/base.css">
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.study-plan-table-view{
				background-color: #f3f5f7;
			}
			.study-plan-cell{
				margin-bottom: 8px;
				background-color: white;
			}
			.study-plan-cell .cell-left-div{
				float: left;
				width: calc(50% - 50px);
				height: 60px;
				display: flex;
				justify-content: center; 
				flex-direction: column;
			}
			.study-plan-cell .cell-center-div{
				width: 100px;
				margin: auto;
				text-align: center;
			}
			.study-plan-cell .cell-right-div{
				float: right;
				width: calc(50% - 50px);
				height: 60px;
				padding-top: 15px;
				/*display: flex;
				justify-content: center; 
				flex-direction: column;*/
			}
			.study-plan-cell .cell-p{
				color: #333;
				margin: 0;
				font-size: 14px;
				height: 20px;
			}
			.tap-down-btn{
				width: 80px;
				height: 30px;
				border: 1px solid #ddd;
				float: right;
			}
			.tap-down-btn .tap-down-btn-img{
				width: 20px;
				position: relative;
				top: 4px;
				left: -2px;
			}
			.tap-down-btn .tap-down-title{
				font-size: 14px;
				line-height: 30px;
				margin-left: 10px;
			}
			.weui_mask {
			    background: rgba(0,0,0,0);
			}
			.weui_dialog.weui_dialog_visible{
				border: 1px solid #d5d5d6;
			}
		</style>
	</head>
	<body>
		<ul id="plan_list_view" class="mui-table-view study-plan-table-view">
			<!-- <li class="mui-table-view-cell study-plan-cell">
				<div class="cell-left-div">
					<p class="cell-p">
						实习计划1
					</p>
				</div>
				<div class="cell-right-div">
					<div class="tap-down-btn">
						<span class="tap-down-title">
							已激活
						</span>
						<img class="tap-down-btn-img" src="../../image/icon_down_triangle.png">
					</div>
				</div>
				<div class="cell-center-div">
					<p class="cell-p">
						2017-12-07
					</p>
					<p class="cell-p">
						~
					</p>
					<p class="cell-p">
						2017-12-07
					</p>
				</div>
			</li>
			<li class="mui-table-view-cell study-plan-cell">
				<div class="cell-left-div">
					<p class="cell-p">
						实习计划1
					</p>
				</div>
				<div class="cell-right-div">
					<div class="tap-down-btn">
						<span class="tap-down-title">
							已激活
						</span>
						<img class="tap-down-btn-img" src="../../image/icon_down_triangle.png">
					</div>
				</div>
				<div class="cell-center-div">
					<p class="cell-p">
						2017-12-07
					</p>
					<p class="cell-p">
						~
					</p>
					<p class="cell-p">
						2017-12-07
					</p>
				</div>
			</li> -->
		</ul>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/jquery-weui.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript">
		var page = 1;
		var rows = 10;
		var dropRefreshCount = 0;
		var planArr = new Array();
		var currentPid = '0';
		apiready = function(){
		 	loadNewData();
		 	setRefreshHeader();
			setPullUpRefresh();
			setupNotifi();
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'refreshPlanListNotifi'
			}, function(ret, err) {
			    loadNewData();
			});
		}
		function loadNewData() {
			page = 1;
			loadData();
		}
		function loadMoreData() {
			page++;
			loadData();
		}
		function refreshData(){
			loadNewData();
		}
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				loadNewData();
			});
		}
		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				if (dropRefreshCount >= rows) {
					loadMoreData();
				}
			});
		}
		function loadData(){
			var params = {
				page : page,
				rows : rows,
				jid : $api.getStorage('cfnetppjxid')
			};
			cfnetppPOST(url_getPlanList, params, true, function(data, status){
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					if (data.code == 200) {
						if (page == 1) {
							planArr = new Array();
						}
						var planList = data.data.list;
						if (planList != null && planList.constructor == Array && planList.length > 0){
							var currentIndex = planArr.length;
							dropRefreshCount = planList.length;
							planArr = planArr.concat(planList);
							var planHtmlString = new String();
							for (var i = currentIndex; i < planArr.length; i++) {
								var planData = planArr[i];
								planHtmlString += htmlStringWithData(i, planData);
							}
							if (page == 1){
								$('#plan_list_view').html(planHtmlString);
							}else{
								$('#plan_list_view').append(planHtmlString);
							}
							// addCellClick();
							$('#noData').hide();
							$('#noNet').hide();
						}else{
							if (page == 1) {
								$('#plan_list_view').html('');
								$('#noData').show();
								$('#noNet').hide();
							}
						}
					}else{
						if (page == 1) {
							$('#plan_list_view').html('');
							$('#noData').show();
							$('#noNet').hide();
						}
					}
				}else{
					if (page == 1) {
						$('#plan_list_view').html('');
						$('#noData').hide();
						$('#noNet').show();
					}else{
						api.toast({
							msg : '网络异常'
						});
					}
				}
			});
		}
		function htmlStringWithData(index, data){
			var status = data.status;
			var statusStr = '未激活';
			if (status == 1) {
				statusStr = '已激活';
			}else if(status == 2){
				statusStr = '已关闭';
			}
			return '<li id="'+data.id+'" index="'+index+'" class="mui-table-view-cell study-plan-cell" onClick="onPlanCellClick('+index+')">'+
				'<div class="cell-left-div">'+
					'<p class="cell-p">'+
						data.title+
					'</p>'+
				'</div>'+
				'<div class="cell-right-div">'+
					'<div planid="'+data.id+'" class="tap-down-btn" onclick="onTapDownClick('+data.id+', event)">'+
						'<span id="status_title'+data.id+'" class="tap-down-title">'+
							statusStr+
						'</span>'+
						'<img class="tap-down-btn-img" src="../../image/icon_down_triangle.png">'+
					'</div>'+
				'</div>'+
				'<div class="cell-center-div">'+
					'<p class="cell-p">'+
						timeStringWithTimeStamp(data.btime)+
					'</p>'+
					'<p class="cell-p">'+
						'~'+
					'</p>'+
					'<p class="cell-p">'+
						timeStringWithTimeStamp(data.etime)+
					'</p>'+
				'</div>'+
			'</li>';
		}

		//点击cell的方法
		function onPlanCellClick(index){
			var planData = planArr[parseInt(index)];
			planData['currenttype'] = 'edit';
			api.openWin({useWKWebView:true,
				name : 'StudyCreatPlan_Win',
				url : 'StudyCreatPlan_Win.html',
				pageParam : planData
			});
		}
		//点击下拉的方法
		function onTapDownClick(planid, event){
			currentPid = planid;
			showActionSheet();
			event.stopPropagation();
		}
		//添加点击事件
		function addCellClick(){
			$('.tap-down-btn').unbind('click');
			$('.tap-down-btn').on("click", function(event){
				var planid = $(this).attr('planid');
				currentPid = planid;
				showActionSheet();
				event.stopPropagation();
			});
			$('.study-plan-cell').unbind('click');
			$('.study-plan-cell').on("click", function(){
				var index = $(this).attr('index');
				var planData = planArr[parseInt(index)];
				planData['currenttype'] = 'edit';
				api.openWin({useWKWebView:true,
					name : 'StudyCreatPlan_Win',
					url : 'StudyCreatPlan_Win.html',
					pageParam : planData
				});
			});
		}
		function showActionSheet(){
			$.actions({
				title: "选择操作",
				onClose: function() {

				},
				actions: [
				{
				 	text: "激活",
				 	// className: "color-primary",
					onClick: function() {
						setupPlanStatus(1);
				  	}
				},
				{
					text : "取消激活",
					// className: "color-primary",
					onClick: function(){
						setupPlanStatus(0);
					}
				},
				// {
				//   	text: "关闭",
				//   	className: "color-warning",
				//   	onClick: function() {
				//   		setupPlanStatus(2);
				//   	}
				// },
				{
				  	text: "删除",
				  	// className: 'color-danger',
				  	onClick: function() {
				  		showDeleteDialog();
				  	}
				}]
			});
		}
		function showDeleteDialog(){
			$.confirm("您确定删除该学习计划吗?", "提示", function() {
				deletePlan();
        	}, function() {
		        //取消操作
        	});
		}
		function setupPlanStatus(planStatus){
			var params = {
				id : currentPid,
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				status : planStatus
			};
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '',
			    text: '修改学习计划状态中',
			    modal: false
			});
			cfnetppPOST(url_editPlan, params, false, function(data, status){
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
						    msg: '修改学习计划状态成功'
						});
						setupPlanCellStatus(planStatus);
					}else{
						api.toast({
						    msg: '修改学习计划状态失败'
						});
					}
				}else{
					api.toast({
					    msg: '修改学习计划状态失败'
					});
				}
			});
		}
		function setupPlanCellStatus(status){
			var statusStr = '未激活';
			if (status == 1) {
				statusStr = '已激活';
			}else if(status == 2){
				statusStr = '已关闭';
			}
			$('#status_title'+currentPid).text(statusStr);
		}
		function deletePlan(){
			var params = {
				id : currentPid,
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid')
			};
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '',
			    text: '删除学习计划中...',
			    modal: false
			});
			cfnetppPOST(url_delPlan, params, false, function(data, status){
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						$('#'+currentPid).remove();
						api.toast({
						    msg: '删除学习计划成功'
						});
					}else if(data.code == 114){//计划下有课程
						api.toast({
						    msg: data.message
						});
					}else{
						api.toast({
						    msg: data.message
						});
					}
				}else{
					api.toast({
					    msg: '删除学习计划失败'
					});
				}
			});
		}
	</script>
</html>